<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">客户管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/customers/list' }">
          <div class="div2">我的客户</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <!-- 查询客户列表 -->
    <div class="headerbox">
      <div class="header">
        <div class="title_left"></div>
        <span
            style="
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: bold;
            line-height: 25px;
            color: #333333;
            padding: 15px 0 15px 0;
          "
        >我的客户</span
        >
      </div>
    </div>

    <div class="query" v-show="!show3">
      <div class="header">
        <span style="font-size: 18px">数据筛选</span>
      </div>
      <div class="polling">
        <el-form
            :inline="true"
            ref="form"
            :model="queryForm"
            label-width=""
            size="small"
            class="search-form"
        >
          <el-form-item label="客户类型">
            <el-select
                v-model="queryForm.clientType"
                filterable
                placeholder="请选择客户类型"
                clearable
                :default-first-option="true"
                @change="handleSelectClientType"
            >
              <el-option
                  v-for="items in client"
                  :key="items.dictId"
                  :label="items.dictName"
                  :value="items.dictId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input
              placeholder="请输入客户姓名"
              v-model.trim="queryForm.name"
              :maxlength="12"
              :minlength="1"
              @keyup.native.enter="searchEvent()"
            ></el-input>
          </el-form-item>

          <el-form-item label="手机号">
            <el-input
              placeholder="请输入客户手机号码"
              v-model.trim="queryForm.phone"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              :maxLength="11"
              @keyup.native.enter="searchEvent()"
            ></el-input>
          </el-form-item>

          <el-form-item label="客户等级">
            <el-select
                v-model="queryForm.category"
                filterable
                placeholder="请选择客户等级"
                clearable
                :default-first-option="true"
                @change="handleSelectCategory"
            >
              <el-option
                  v-for="items in rank"
                  :key="items.dictId"
                  :label="items.dictName"
                  :value="items.dictId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="客户意向">
            <el-select
                v-model="queryForm.intention"
                filterable
                placeholder="请选择客户意向"
                clearable
                :default-first-option="true"
                @change="handleSelectIntention"
            >
              <el-option
                  v-for="items in intention"
                  :key="items.dictId"
                  :label="items.dictName"
                  :value="items.dictId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="部门选择">
            <el-cascader
                v-model="queryForm.orgName"
                :options="options"
                :props="{
                checkStrictly: true,
                label: 'orgName',
                value: 'orgCode',
                children: 'children',
              }"
                clearable
                filterable
                @change="handleSelectOrgName"
            ></el-cascader>
          </el-form-item>

          <el-form-item label="跟进客服">
            <el-select
                v-model="queryForm.service"
                filterable
                clearable
                placeholder="请选择客服"
                :default-first-option="true"
                @change="handleSelectCustomer"
            >
              <el-option
                  v-for="items in customer"
                  :key="items.id"
                  :label="items.reallyName"
                  :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="入线方式">
            <el-select
              v-model="queryForm.Incoming"
              filterable
              placeholder="选择入线方式"
              clearable
              :default-first-option="true"
              @change="handleSelectIncoming"
              @keyup.native.enter="searchEvent()"
            >
              <el-option
                  v-for="items in line"
                  :key="items.id"
                  :label="items.name"
                  :value="items.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="来源平台">
            <el-select
                v-model="queryForm.platformId"
                filterable
                placeholder="选择来源平台"
                clearable
            >
              <el-option
                  v-for="item in platformList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
                v-model="date"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                @input="immediUpdate"
                @change="handleSelectDate"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="分配时间">
            <el-date-picker
                v-model="assignTime"
                type="daterange"
                unlink-panels
                clearable
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']">
              >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="指派时间">
            <el-date-picker
                v-model="customerAssignTime"
                type="daterange"
                unlink-panels
                clearable
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']">
              >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="所属类目">
            <el-cascader
                clearable
                v-model="queryForm.categoryId"
                :options="categoryOptions"
                :props="{
                label: 'categoryName',
                value: 'id',
                checkStrictly: true,
              }"
                filterable
                @change="handleChangeSearch"
            ></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                @click="searchEvent()"
                @keyup.enter.native="searchEvent"
            >搜索</el-button
            >
            <el-button plain @click="reset">重置</el-button>
            <!-- <div style="display: flex; justify-content: space-between">
            <div class="selectDate">
              <span>创建时间</span>

              </div>
            </div>

            <div>

            </div>
          </div> -->
            <!-- <el-button type="primary">导出数据</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 查询客户列表 -->
    <!-- 分配用户列表 -->
    <div class="table">
      <div class="inquiryTab">
        <div class="inquiryTab_header">
          <div class="tabTitle">客户列表</div>
          <div class="btnBox">
            <el-button
                type="primary"
                size="mini"
                @click="queryService"
            >跟进客服查询</el-button
            >
            <el-button
                type="primary"
                size="mini"
                v-if="parArray.indexOf('addCustomerCode') != -1"
                @click="showDialog('新增客户', 'add', '50%')"
            >新增客户</el-button
            >
            <el-button
                size="mini"
                @click="onDetail()"
                plain
            >批量指派</el-button
            >
            <el-button
                type="success"
                size="mini"
                @click="customerGuide"
                v-if="parArray.indexOf('userExportCode') != -1"
            >客户导出</el-button
            >
            <el-button
                type="warning"
                size="mini"
                @click="customerMoneySum"
                v-if="parArray.indexOf('userExportCode') != -1"
            >导出客户消费总额</el-button
            >
          </div>
        </div>
        <div class="table">
          <el-table
              v-horizontal-scroll="'always'"
			  v-loading="loading"
              class="tableCont"
              :data="tableData.list"
              style="width: 100%"
              :header-cell-style="{background: '#fafafa',color:'#333333'}"
              @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column label="姓名" min-width="100">
              <template slot-scope="scope">
                <!--
                <el-popover
                  placement="bottom-start"
                  width="500"
                  :offset="70"
                  trigger="hover"
                  :open-delay="500"
                  @show="test(scope.row)"
                >
                  <div>
                    <div style="margin-bottom: 5px">
                      {{ scope.row.userName }}-进度
                    </div>
                    <p
                      style="white-space: normal"
                      v-for="(item, index) in scope.row.context"
                      :key="index"
                    >
                      {{ item }}
                    </p>
                  </div>
                  <p
                    slot="reference"
                    class="nameClick"
                    @click="toInformation(scope.row, 1)"
                  >
                    {{ scope.row.userName }}
                  </p>
                </el-popover>
                -->
                <span @click="toInformation(scope.row, 1)" style="cursor:pointer;"  :style="scope.row.isFollow?'color:#409EFF;font-weight: bold':''">{{ scope.row.userName }}</span>
              </template>

            </el-table-column>
            <el-table-column field="phone1" label="手机号码" min-width="120">
              <template slot-scope="scope">
                <p v-if="is_null(scope.row.phone2)">{{ scope.row.phone }}</p>
                <div v-else>
                  <div>{{ scope.row.phone1 }}</div>
                  <div>{{ scope.row.phone2 }}</div>
                </div>
              </template>
            </el-table-column>

            <!-- <el-table-column
              field="platformName"
              label="来源平台"
              min-width="120"
            >
              <template slot-scope="scope">
                <p>
                  {{ scope.row.platformName ? scope.row.platformName : "--" }}
                </p>
              </template>
            </el-table-column> -->
            <!-- <el-table-column
              field="ditchTime"
              label="入线方式"
              show-overflow
              min-width="130"
            >
              <template slot-scope="scope">
                <p v-if="is_null(scope.row.userDitch)">--</p>
                <p v-else>{{ scope.row.userDitch }}</p>
              </template>
            </el-table-column> -->
            <!-- <el-table-column label="客户类目 / 等级 / 意向 / 客服 / 跟进次数" min-width="460"> -->
            <el-table-column label="客户类目 / 来源平台 / 入线方式 / 等级 / 客服 / 跟进次数" min-width="460">
              <template slot-scope="scope">
                <p v-for="(item, index) in scope.row.extantMap" :key="index">
                  <span>{{item.categoryName ? item.categoryName : "--"}} / </span>
                  <span>{{item.platformName ? item.platformName : "--"}} / </span>
                  <span>{{item.userDitchName ? item.userDitchName : "--"}} / </span>
                  <span>{{item.level ? item.level : "--"}} / </span>
                  <el-tooltip
                      class='item'
                      effect='dark'
                      content='单击复制'
                      placement='top'
                  >
                    <span style='cursor:pointer' @click="copyServiceName(item.customerName)"> {{item.customerName ? item.customerName : "--"}} / </span>
                  </el-tooltip>

                  <span>{{item.traceExists ? item.traceExists : "--"}}</span>

                </p>
              </template>
            </el-table-column>
            <el-table-column label="客户意向" min-width="80">
              <template slot-scope="scope">
                <p v-for="(item, index) in scope.row.extantMap" :key="index">
                  {{
                    (item.userIntention ? item.userIntention : "--")
                  }}
                </p>
              </template>
            </el-table-column>
            <el-table-column
                field="address"
                label="地区"
                show-overflow
                min-width="180"
            >
              <template slot-scope="scope">
                {{
                  scope.row.provinceCode
                      ? scope.row.provinceCode +
                      scope.row.cityCode +
                      scope.row.regionCode
                      : "--"
                }}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="userIntention" label="类型">	</el-table-column> -->
            <!--
            <el-table-column label="跟进客服" min-width="110">
              <template slot-scope="scope">
                <p>
                  {{ scope.row.customerName ? scope.row.customerName : "--" }}
                </p>
              </template>
            </el-table-column>
            -->
            <el-table-column
                field="assignTime"
                label="分配时间"
                show-overflow
                min-width="200"
            >
              <template slot-scope="scope">
                <p v-for="(item,index) in scope.row.extantMap" :key="index">{{item.assignTime || '-'}}</p>
              </template>
            </el-table-column>
            <el-table-column
                field="customerAssignTime"
                label="指派时间"
                show-overflow
                min-width="200"
            >
              <template slot-scope="scope">
                <p v-for="(item,index) in scope.row.extantMap" :key="index">{{item.customerAssignTime || '-'}}</p>
              </template>
            </el-table-column>
            <el-table-column
                field="ditchTime"
                label="资源时间"
                show-overflow
                min-width="200"
            >
              <template slot-scope="scope">
                <p>{{scope.row.ditchTime}}</p>
              </template>
            </el-table-column>
            <el-table-column
                field="ditchTime"
                label="创建时间"
                show-overflow
                min-width="200"
            >
              <template slot-scope="scope">
                <p>{{ scope.row.createdTime }}</p>
              </template>
            </el-table-column>
            <el-table-column
                field="updatedTime"
                label="最后更新时间"
                show-overflow
                min-width="200"
            >
              <template slot-scope="scope">
                <p v-if="is_null(scope.row.updatedTime)">--</p>
                <p v-else>{{ scope.row.updatedTime }}</p>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="230" fixed="right">
              <template slot-scope="scope">
                <el-tooltip
                    class="item"
                    effect="dark"
                    content="添加订单"
                    placement="top-start"
                >
                  <p
                      class="operation"
                      v-if="parArray.indexOf('mcAddorder') != -1&&(scope.row.type=='3'||(scope.row.serviceId||userId == 1))"
                      @click="toAddOrder(scope.row)"
                  >
                    <span>添单</span>
                  </p>
                </el-tooltip>

                <el-tooltip
                    class="item"
                    effect="dark"
                    content="转移客户"
                    placement="top-start"
                >
                  <p
                      class="operation"
                      v-if="parArray.indexOf('assageWy') != -1"
                      @click="showDialog('分配资源', 'assign', '70%', scope.row)"
                  >
                    <span>指派</span>
                    <!-- <img src="../../assets/assign.png" alt="" /> -->
                  </p>
                </el-tooltip>
                <el-tooltip
                    class="item"
                    effect="dark"
                    content="编辑信息"
                    placement="top-start"
                >
                  <p
                      class="operation"
                      v-if="parArray.indexOf('btnEditCode') != -1"
                      @click="toInformation(scope.row)"
                  >
                    <span>查看/编辑</span>
                    <!-- <img src="../../assets/edit.png" alt="" /> -->
                  </p>
                </el-tooltip>
                <el-tooltip
                    class="item"
                    effect="dark"
                    content="跟进"
                    placement="top-start"
                >
                  <!-- v-if="parArray.indexOf('followUp') != -1" -->
                  <p class="operation" @click="followUpBtn(scope.row)">
                    <span>跟进</span>
                  </p>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 分页start -->
      <div class="page" v-if="tableData.totalNum > 0">
        <div class="block">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage1"
              :page-sizes="[10, 20, 50, 100, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.totalNum"
              prev-text="上一页"
              next-text="下一页"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 分页end -->
    </div>
    <el-dialog
        id="show-el-dialog"
        :visible.sync="dialogBatch.visible"
        :append-to-body="true"
        :title="dialogBatch.title"
        :width="dialogBatch.width"
        :close-on-click-modal="false"
        :before-close="handledialogBatchClose"
    >
      <!-- 批量分配 -->
      <template v-if="dialogBatch.type == 'batchAssign'">
        <div style="width:250px">
          <el-form :rules="rulesClientCategory" :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
            <el-form-item label="类目" prop="clientCategory">
              <el-cascader
                  size="mini"
                  clearable
                  v-model="ruleForm.clientCategory"
                  :options="categoryOptions"
                  :props="{
                    label: 'categoryName',
                    value: 'id',
                    checkStrictly: true,
                  }"
                  filterable
                  @change="handleClientCategory"
              ></el-cascader>
            </el-form-item>
          </el-form>
        </div>
        <div style="display: inline-block; margin: 0px 20px">
          员工姓名
          <el-input
              v-model="formTc.username"
              placeholder="请输入员工姓名"
              size="small"
              style="width: 150px"
          ></el-input>
        </div>
        <el-button size="mini" @click="treeAxios(1)" type="primary">
          搜索
        </el-button>
        <el-button size="mini" @click="treeAxios(2)" type="warning">
          重置
        </el-button>

        <div class="tree">
          <el-input
              style="margin: 0 0px 20px"
              placeholder="输入关键字进行搜索"
              v-model="filterText"
          ></el-input>
          <el-tree
              class="el-menu-vertical-demo"
              ref="tree"
              :data="tree"
              :props="defaultProps"
              :highlight-current="true"
              @node-click="handleNodeClick"
              :default-expand-all="true"
              :filter-node-method="filterNode"
          ></el-tree>
        </div>
        <div class="table1">
          <el-table
              ref="multipleTable"
              :data="tablePerson.list"
              style="width: 100%"
              :row-key="getRowKey"
              @selection-change="handleSelectionMoreChange"
          >
            <el-table-column
                type="selection"
                width="50"
                :reserve-selection="true"
            ></el-table-column>
            <el-table-column label="姓名">
              <template slot-scope="props">
                <p>{{ props.row.reallyName }}</p>
              </template>
            </el-table-column>
            <el-table-column
                label="联系电话"
                prop="phoneNumber"
            ></el-table-column>
            <el-table-column label="所在部门">
              <template slot-scope="props">
                <span>{{ props.row.orgName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="职位" prop="positionName"></el-table-column>
            <el-table-column
                label="员工状态"
                prop="statusName"
            ></el-table-column>
          </el-table>
        </div>
        <!-- 弹突层分页start -->
        <div class="page2" v-if="tablePerson.totalNum > 0">
          <div class="block">
            <el-pagination
                @size-change="handleSizeEmplay"
                @current-change="handleCurrentEmplay"
                :current-page.sync="stafpage"
                :page-size="stafPageSize"
                layout="total,sizes,prev, pager, next"
                prev-text="上一页"
                next-text="下一页"
                :total="tablePerson.totalNum"
            >
            </el-pagination>
          </div>
        </div>
        <!-- 分页end -->
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="listAxios();dialogBatch.visible = false"
          >取 消</el-button
          >
          <el-button
              size="mini"
              type="primary"
              @click="submission('ruleForm')"
          >确 定</el-button
          >
        </div>
        <!-- 分页end -->
      </template>
      <!-- 分配用户列表 -->
    </el-dialog>
    <el-dialog
        id="show-el-dialog"
        :visible.sync="dialog.visible"
        :append-to-body="true"
        :title="dialog.title"
        :width="dialog.width"
        :close-on-click-modal="false"
        :before-close="handledialogService"
    >
      <!-- 单个分配 -->
      <template v-if="dialog.type == 'assign'">
        <div style="width:250px">
          <el-form :rules="rulesClientCategory" :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
            <el-form-item label="类目" prop="clientCategory">
              <el-cascader
                  size="mini"
                  clearable
                  v-model="ruleForm.clientCategory"
                  :options="categoryOptions"
                  :props="{
                    label: 'categoryName',
                    value: 'id',
                    checkStrictly: true,
                  }"
                  filterable
                  @change="handleClientCategory"
              ></el-cascader>
            </el-form-item>
          </el-form>
        </div>
        <div style="display: inline-block; margin: 0px 20px">
          员工姓名
          <el-input
              v-model="formTc.username"
              placeholder="请输入员工姓名"
              size="small"
              style="width: 150px"
          ></el-input>
        </div>
        <el-button size="mini" @click="treeAxios(1)" type="primary">
          搜索
        </el-button>
        <el-button size="mini" @click="treeAxios(2)" type="warning">
          重置
        </el-button>

        <div class="tree">
          <el-input
              style="margin: 0 0px 20px"
              placeholder="输入关键字进行搜索"
              v-model="filterText"
          ></el-input>
          <el-tree
              class="el-menu-vertical-demo"
              ref="tree"
              :data="tree"
              :props="defaultProps"
              :highlight-current="true"
              @node-click="handleNodeClick"
              :default-expand-all="true"
              :filter-node-method="filterNode"
          ></el-tree>
        </div>
        <div class="table1">
          <el-table
              ref="multipleTableTWO"
              :data="tablePerson.list"
              style="width: 100%"
              :row-key="getRowKey"
          >
            <el-table-column width="50">
              <template slot-scope="scope">
                <el-radio
                    :label="scope.$index"
                    v-model="multipleSelection"
                    @change.native="getCurrentRow(scope.row)"
                    style="color: #fff"
                >
                  <span>&nbsp;</span>
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column label="姓名">
              <template slot-scope="props">
                <p>{{ props.row.reallyName }}</p>
              </template>
            </el-table-column>
            <el-table-column
                label="联系电话"
                prop="phoneNumber"
            ></el-table-column>
            <el-table-column label="所在部门">
              <template slot-scope="props">
                <span>{{ props.row.orgName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="职位" prop="positionName"></el-table-column>
            <el-table-column
                label="员工状态"
                prop="statusName"
            ></el-table-column>
          </el-table>
        </div>
        <!-- 弹突层分页start -->
        <div class="page2" v-if="tablePerson.totalNum > 0">
          <div class="block">
            <el-pagination
                @size-change="handleSizeEmplay"
                @current-change="handleCurrentEmplay"
                :current-page.sync="stafpage"
                :page-size="stafPageSize"
                layout="total,sizes,prev, pager, next"
                prev-text="上一页"
                next-text="下一页"
                :total="tablePerson.totalNum"
            >
            </el-pagination>
          </div>
        </div>
        <!-- 分页end -->
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="listAxios();dialog.visible = false"
          >取 消</el-button
          >
          <el-button
              size="mini"
              type="primary"
              @click="allocation('ruleForm')"
          >确 定</el-button
          >
        </div>
        <!-- 分页end -->
      </template>
      <!-- 单个分配结束 -->
      <!-- 查询跟进客服开始 -->
      <template v-if="dialog.type == 'queryService'">
        <el-form
            :inline="true"
            :model="queryForm"
            size="small"
            class="search-form"
        >
          <el-form-item label="客户电话">
            <el-input
                clearable
                placeholder="请输入客户手机号码"
                v-model.trim="clientPhone"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                :maxLength="11"
            ></el-input>
          </el-form-item>
          <el-button size="mini" style="width: 68px;height: 32px;" @click="handlerClient()" type="primary">
            搜索
          </el-button>
        </el-form>
        <el-table :data="clientMessage"  style="width: 100%" :row-key="getRowKey">
          <el-table-column label="客户姓名" minWidth="40" prop="userName"></el-table-column>
          <el-table-column label="客户电话" minWidth="60" prop="phone"></el-table-column>
          <el-table-column label="所属公司部门" minWidth="80">
            <template slot-scope="props">
              <span>{{ props.row.orgNames }}</span>
            </template>
          </el-table-column>
          <el-table-column label="跟进客服" minWidth="50" prop="reallyName"></el-table-column>
          <el-table-column label="跟进时间" minWidth="80" prop="assignTime"></el-table-column>
          <el-table-column label="创建时间" minWidth="80" prop="createdTime"></el-table-column>
        </el-table>
      </template>
      <!-- 查询跟进客服结束 -->

      <template v-if="dialog.type == 'add'">
        <add-customers
            ref="addCustomers"
            :type="dialog.type"
            :getDateList="listAxios"
            v-on:closeDialog="closeDialog"
        ></add-customers>
      </template>
    </el-dialog>
    <!-- 右侧抽屉 -->
    <el-drawer
        title="新增跟进记录"
        :visible.sync="drawer"
        :direction="direction"
        append-to-body
        :before-close="handleClose">
      <el-form :model="followUp" :rules="rules" ref="followUp">
        <el-form-item label="跟进人:" prop="customerName" label-width="110px">
          <el-input
              style="width: 100%"
              v-model="followUp.customerName"
              :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="类目:" prop="customerName" label-width="110px">
          <el-select v-model="followUp.categoryId" placeholder="请选择">
            <el-option
                v-for="item in followCustomerArr"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="秒杀:" prop="spiked" label-width="110px">
          <el-radio-group v-model="followUp.spiked" @change="seckill">
            <el-radio label="0">无</el-radio>
            <el-radio label="1">秒杀</el-radio>
          </el-radio-group>
          <el-input-number
              :controls="false"
              :precision="2"
              type="number"
              :disabled="seckillPrice"
              v-model="followUp.spikeMoney"
              style="width: 20%; margin-left: 20px"
              size="mini"
          ></el-input-number
          ><span style="padding-left: 5px">元</span>
        </el-form-item>
        <el-form-item
            label="接听状态:"
            prop="receiveState"
            label-width="110px"
        >
          <el-radio-group
              v-model="followUp.receiveState"
              @change="answerStatus"
          >
            <el-radio label="0">无</el-radio>
            <el-radio label="1">接通</el-radio>
            <el-radio label="2">未接通</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
            label="接听状况:"
            :prop="receiveDetailsState"
            label-width="110px"
        >
          <el-select
              style="width: 100%"
              v-model="followUp.receiveDetails"
              filterable
              placeholder="请选择接听状况"
              clearable
              :disabled="answerState"
              :default-first-option="true"
          >
            <el-option
                v-for="items in answerStateDate.list"
                :key="items.id"
                :label="items.name"
                :value="items.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            label="微信添加状态:"
            prop="wxFencing"
            label-width="110px"
        >
          <el-radio-group v-model="followUp.wxFencing" @change="wxAddState">
            <el-radio label="3">已添加</el-radio>
            <el-radio label="4">未添加</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="微信状况:" prop="wxDetails" label-width="110px">
          <el-select
              style="width: 100%"
              v-model="followUp.wxDetails"
              filterable
              placeholder="请选择微信状况"
              clearable
              :default-first-option="true"
          >
            <el-option
                v-for="items in wxAddStateData.list"
                :key="items.id"
                :label="items.name"
                :value="items.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" label-width="110px">
          <el-input
              type="textarea"
              v-model="followUp.comment"
              maxlength="200"
              show-word-limit
          ></el-input>
        </el-form-item>
        <div v-if="parArray.indexOf('template_send') != -1">
          <div class="titleCss">
            发送短信
          </div>
          <el-form-item
              label="发送短信:"
              label-width="110px"
              prop="sendMessageFlag"
          >
            <el-radio-group v-model="followUp.sendMessageFlag"  @change="handlerSendRadio">
              <el-radio label="0">否</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="模板:" :prop="templateIdProp" label-width="110px" v-if="followUp.sendMessageFlag=='1'">
            <el-select v-model="followUp.templateId"  @change="selectTemplate" clearable  placeholder="请选择模板" style="width: 100%">
              <el-option
                  v-for="item in templateOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
            <div class="templateDiv"  v-if="templateCenter">
              <p>{{templateCenter}}</p>
            </div>
          </el-form-item>

          <div v-if="followUp.paramList.length != 0 && followUp.sendMessageFlag=='1'">
            <el-form-item label-width="110px" label="参数"  v-for="(item,index) in customerMessage" :key="index" >
            <span slot="label">
              参数{{index+1}}：
            </span>
              <el-radio-group v-model="followUp.paramList[index].paramType" @change="messageModel(index,followUp.paramList[index].paramType)">
                <el-radio  label="1">客户信息</el-radio>
                <el-radio  label="2">自定义信息</el-radio>
              </el-radio-group>
              <el-input
                  v-if="followUp.paramList[index].paramType=='2'"
                  class="input-new-tag"
                  v-model="followUp.paramList[index].paramContent"
                  ref="saveTagInput"
                  placeholder="请输入客户信息"
              >
              </el-input>
              <el-select  v-model="followUp.paramList[index].paramContent"  clearable  placeholder="请选择客户信息" v-if="followUp.paramList[index].paramType=='1'">
                <el-option
                    v-for="(item,index) in dictionaries.message_customer_user_info"
                    :key="index"
                    :label="item.dictName"
                    :value="item.dictId">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="模板签名:" :prop="signNameProp" label-width="110px"  v-if="followUp.sendMessageFlag=='1'">
            <el-select v-model="followUp.signName" clearable  placeholder="请选择模板签名" style="width: 100%">
              <el-option
                  v-for="(item, index) in dictionaries.message_sign_type"
                  :key="index"
                  :label="item.dictName"
                  :value="item.dictId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" label-width="110px"  >
            <el-checkbox v-if="followUp.sendMessageFlag=='1'"
                         v-model="followUp.defFlag"
                         :false-label="0"
                         :true-label="1"
                         @change='handlerCheckbox'
            >设为默认
            </el-checkbox>
          </el-form-item>
          <div class="titleCss">
            跟进记录
          </div>
          <div class="followUp" >
            <div class="followUpBox" v-for="(item,index) in customerData" :key="index">
              <p><span>跟进人：<span>{{item.customerName?item.customerName:'-'}}</span></span></p>
              <p><span>所属公司部门：<span>{{item.companyName?item.companyName:'-'}}</span></span></p>
              <p><span>跟进情况：<span>{{item.comment?item.comment:'-'}}</span></span></p>
              <p><span>跟进类型：<span>{{item.receiveState == 0 ? '无' : item.receiveState}}</span>/<span>微信{{item.wxFencing}}</span></span></p>
              <p><span>操作时间：<span>{{item.createdTime?item.createdTime:'-'}}</span></span></p>
              <span class="followUpBox_index">{{item.numIndex}}</span>
            </div>

          </div>
        </div>

        <div class="drawerBtn">
          <el-button class="cancel" @click="handlerQuxiao">取 消</el-button>
          <el-button class="affirm" type="primary" @click="subFollowUp('followUp')"
          >确 定</el-button
          >
        </div>
      </el-form>
    </el-drawer>
    <!-- 分配用户列表 -->
  </div>
</template>

<script>
import levelAddr from '@/components/levelAddr'
import addCustomers from './components/addCustomers.vue'
export default {
  components: {
    levelAddr,
    addCustomers
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    },
    followUp: {
      handler (newVal, oldVal) {
        console.log(newVal, oldVal)
        if (newVal.sendMessageFlag == '1') {
          this.templateIdProp = 'templateId'
          this.signNameProp = 'signName'
        }
      },
      deep: true // 为true，表示深度监听
    },
    drawer: {
      handler (newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }
  },
  data () {
    return {
      lastTimeTwo: 0,
      lastTime: 0, // 防抖
      dataWarning: false,
      customerMessage: '',
      test: true,
      templateIdProp: '',
      signNameProp: '',
      templateCenter: '',
      templateOptions: '',
      customerData: [],
      drawer: false,
      direction: 'rtl', // 抽屉打开方式
      clientMessage: [], // 跟进客服数据
      clientPhone: '', // 客户电话
      userId: '', // 客服id
      serviceId: '', // 指派客服的id
      clientCategoryId: '',
      ruleForm: {
        clientCategory: '' // 客户类目
      },

      dialogFollowUpvisible: false,
      followCustomerArr: [], // 跟进类目
      followUp: { // 新增跟进记录
        customerName: '',
        categoryId: '', // 所属类目
        trackingId: '',
        spiked: '', // 是否秒杀：0->无；1->秒杀；
        spikeMoney: '0', // 秒杀金额，可填空，浮点型
        receiveState: '', // 接听状态：0-> 无；1-> 接通；2-> 未接通；
        receiveDetails: '', // 接听状况：字典获取，receive_details
        wxFencing: '', // 微信添加状态0-> 已添加；1-> 未添加；
        wxDetails: '', // 微信状况：字典获取：wx_details
        sendMessageFlag: '', // 是否发送短信
        templateId: '', // 模板
        signName: '', // 模板签名
        defFlag: '',
        comment: '',
        paramList: []

      },
      dictionaries: { // 字典数据
        message_object_type: [], // 发送对象
        message_crowd_type: [], // 人群类型
        message_sign_type: [], // 消息签名
        customer_type: [],
        tractring_record_type: [],
        message_customer_user_info: []
      },
      show3: false,
      queryForm: {
        name: '',
        phone: '',
        Incoming: '',
        service: '',
        category: '',
        type: [],
        orgName: '',
        clientType: '',
        intention: '', // 客户意向
        platformId: '' // 来源平台
      },
      platformList: [], // 平台
      intention: [],
      date: '',
      tableData: [],
	  loading:false,
      currentPage1: 1,
      pageSize: 10,
      line: [],
      rank: [],
      customer: [],
      limits: '',
      parArray: [],
      client: [],
      categoryOptions: [],
      options: [],
      height: '500px',
      filterText: '',
      data: [],
      assignTime: [], // 分配时间
      customerAssignTime: [], // 指派时间
      tree: [],
      formTc: {
        username: ''
      },
      defaultProps: {
        children: 'children',
        label: 'orgName'
      },
      Visible: false,
      multipleTable: [],
      multipleSelection: '',
      batchMultipleSelection: '', // 批量指派
      MoreMultipleSelection: [], // 批量指派选择客服数组
      tablePerson: [],
      stafpage: 1,
      stafPageSize: 10,
      beginTime: '',
      endTime: '',
      assignStartTime: '',
      assignEndTime: '',
      dialogBatch: { visible: false, title: '', type: '', width: '' },
      dialog: { visible: false, title: '编辑', type: '', width: '1100', obj: {}},
      followUpData: '',
      followUpDateList: '',
      seckillPrice: false, // 跟进弹框内的秒杀价格输入框状态
      answerState: false, // 跟进弹框内的接听状况
      rules: {
        customerName: [
          { required: true, message: '请输入跟进人', trigger: 'blur' }
        ],
        spiked: [
          { required: true, message: '请选择有无秒杀', trigger: 'change' }
        ],
        receiveState: [
          { required: true, message: '请选择接听状态', trigger: 'change' }
        ],
        receiveDetails: [
          { required: true, message: '请选择接听状况', trigger: 'change' }
        ],
        wxFencing: [
          { required: true, message: '请选择微信添加状态', trigger: 'change' }
        ],
        wxDetails: [
          { required: true, message: '请选择微信状况', trigger: 'change' }
        ],
        templateId: [
          { required: true, message: '请选择模板', trigger: 'change' }
        ],
        signName: [
          { required: true, message: '请选择模板前面', trigger: 'change' }
        ],
        sendMessageFlag: [
          { required: true, message: '请选择是否发送短信', trigger: 'change' }
        ]
      },
      rulesClientCategory: {
        clientCategory: [
          { required: true, message: '请选择类目', trigger: 'change' }
        ]
      },
      answerStateDate: [], // 接听状况
      wxAddStateData: [], // 微信状况
      state: false, // 是否取消验证
      receiveDetailsState: 'receiveDetails',
      MoreData: []

    }
  },
  created () {
    this.getPlatformList()// 获取平台列表
    // console.log(this.$enter(this.$route.name))
    // document.onkeyup = e => {
    //   console.log('myCustomers')
    //   console.log(e, 'e')
    //   if (e.keyCode === 13) {
    //     console.log(this.$route.name, 'rwerwer')
    //     this.$route.name === 'myCustomers' ? this.searchEvent() : ''
    //   }
    // }
    this.commentAxios()
    this.customerlist()
    this.department()
    this.getfollowUpList()
    this.getCategoryDate()// 类目
    this.getTemplateDataList()
    for (const type in this.dictionaries) { this.getDictionaries(type) }
    // 权限设定判断 normsCode
    this.limits = JSON.parse(sessionStorage.getItem('limit'))
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.queryForm.orgName = this.userInfo.orgCode

    if (this.userInfo.id != 1) {
      this.queryForm.service = this.userInfo.id
    }

    /** 跟进客服 **/
    // 超级管理员 默认全部

    // 数据文员 默认全部

    // 正常客服 默认 自己

    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === 'myCustomersCode'
    )
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code)
    })
    // 权限设定判断 normsCode
    const saleId = JSON.parse(sessionStorage.getItem('salesAuthorityId'))
    this.userId = JSON.parse(sessionStorage.getItem('user_id'))

    this.queryForm.clientType = '1'
    if (this.userInfo.id == 1) {
      this.queryForm.clientType = '5'
    }

    this.listAxios(1)

    const _this = this
    document.onkeydown = function (e) {
      const key = window.event.keyCode
      if (key == 13) {
        _this.searchEvent()
      }
    }
    // this.customerlist();
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null
    next()
  },

  activated () {
    // this.commentAxios();
    // let saleId = JSON.parse(sessionStorage.getItem("salesAuthorityId"));
    // if (
    // 	saleId == "" ||
    // 	saleId == undefined ||
    // 	sessionStorage.getItem("positionCode") == "manager"
    // ) {
    // 	this.queryForm.clientType = "4";
    // } else {
    // 	this.queryForm.clientType = "1";
    // }
    // this.listAxios(1)
  },
  methods: {
    messageModel (index, type) {
      console.log(index, type, 'index,type')
      this.followUp.paramList[index].paramContent = ''
      // if(this.paramList[index]){

      // }
    },
    // 模板选择
    selectTemplate (id) {
      console.log(id)
      if (id) {
        this.templateCenter = this.templateOptions.find(e => { return e.id == id }).content
        this.customerMessage = this.templateOptions.find(e => { return e.id == id }).paramNum
        console.log(this.templateCenter, 'this.templateCenter')
        const tempArr = []
        for (let index = 1; index <= this.customerMessage; index++) {
          const obj = {
            paramType: '1',
            paramContent: ''
          }
          tempArr.push(obj)
        }
        this.followUp.paramList = tempArr
      } else {
        this.templateCenter = ''
      }
    },
    // 设为默认
    handlerCheckbox (e) {
      console.log(e)
    },
    // 获取模板数据
    getTemplateDataList () {
      const data = {
      }
      this.$api.templateDataList(data).then((res) => {
        if (res.code == 0) {
          console.log(res, 'res')
          this.templateOptions = res.data
        }
      })
    },
    // 跟进按钮
    followUpBtn (row) {
      const userId = sessionStorage.getItem('user_id')
      const tempCustomerArr = []
      row.extantMap.forEach(it => {
        if (it.customerId == userId) {
          tempCustomerArr.push({ label: it.categoryName, value: it.categoryId })
        }
      })
      this.followCustomerArr = tempCustomerArr
      if (tempCustomerArr[0] && tempCustomerArr[0].value) {
        this.followUp.categoryId = tempCustomerArr[0].value
      }
      console.log(this.followUp.categoryId)
      const templateId = localStorage.getItem('templateId')
      const signName = localStorage.getItem('signName')
      const defFlag = localStorage.getItem('defFlag')
      console.log(templateId, signName, defFlag)
      console.log(row)
      if (templateId && signName) {
        this.$nextTick(() => {
          this.followUp.templateId = Number(templateId)
          this.followUp.signName = signName
          this.followUp.defFlag = Number(defFlag)
          this.templateCenter = this.templateOptions.find(e => { return e.id == this.followUp.templateId }).content
        })
      }
      // this.followUp.template = 1
      this.drawer = true
      this.followUp.customerName = this.userInfo.reallyName
      this.followUp.sendMessageFlag = '0'
      this.followUpDateList = row
      this.$nextTick(() => {
        this.$refs['followUp'].clearValidate()
      })
      this.getFollow(row.id)
    },
    // 跟进信息
    getFollow (id) {
      const params = {
        id: id
      }
      this.$api.customerTrackingPageList(params).then((res) => {
        if (res.code == 0) {
          console.log(res, 'resresrerwe')
          for (var i = 0; i < res.data.list.length; i++) {
            console.log(res.data.list[i], i)
            if (res.data.list[i].receiveState) {
              res.data.list[i].receiveState = this.dictionaries.tractring_record_type.find((e) => e.dictId == res.data.list[i].receiveState).dictName
            }
            if (res.data.list[i].wxFencing) {
              res.data.list[i].wxFencing = this.dictionaries.tractring_record_type.find((e) => e.dictId == res.data.list[i].wxFencing).dictName
            }
            res.data.list[i].numIndex = res.data.list[i].num
            res.data.list[i].num = Number(0)
            res.data.list[i].num = Number(i + 1)
            if (res.data.list[i].num < 10) {
              res.data.list[i].numIndex = '0' + res.data.list[i].num
            } else {
              res.data.list[i].numIndex = res.data.list[i].num
            }
          }

          this.customerData = res.data.list
          console.log(this.customerData, 'this.customerData')
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handlerQuxiao () {
      this.templateCenter = ''
      this.followUp.templateId = ''// 模板
      this.followUp.customerName = ''
      this.followUp.trackingId = ''
      this.followUp.spiked = ''// 是否秒杀：0->无；1->秒杀；
      this.followUp.spikeMoney = '' // 秒杀金额，可填空，浮点型
      this.followUp.receiveState = ''// 接听状态：0-> 无；1-> 接通；2-> 未接通；
      this.followUp.receiveDetails = '' // 接听状况：字典获取，receive_details
      this.followUp.wxFencing = ''// 微信添加状态0-> 已添加；1-> 未添加；
      this.followUp.wxDetails = ''// 微信状况：字典获取：wx_details
      this.followUp.sendMessageFlag = ''// 是否发送短信
      this.followUp.wxFencing = ''
      this.followUp.signName = '' // 模板签名
      this.followUp.defFlag = '' // 是否设为默认
      this.drawer = false
    },
    // 获取状态字典数据
    getDictionaries (type) {
      if (type && this.dictionaries[type].length > 0) { return }
      const params = { groupId: type }
      this.$api.dictionaries(params).then((res) => {
        console.log(res, 'resresres')
        this.dictionaries[type] = res.data
      }).catch((err) => {
        console.log(err)
      })
    },
    // 发送短信单选
    handlerSendRadio (e) {
      console.log(e)
      this.followUp.sendMessageFlag = String(e)
      const templateId = localStorage.getItem('templateId')
      const signName = localStorage.getItem('signName')
      const defFlag = localStorage.getItem('defFlag')

      // console.log(this.followUp.send)
      if (e == 0) {
        this.followUp.templateId = ''
        this.followUp.signName = ''
        this.templateCenter = ''
        this.followUp.defFlag = '' // 是否设为默认
        this.templateIdProp = 'templateIdProp'
        this.signNameProp = 'signNameProp'
      } else {
        if (templateId && signName) {
          this.followUp.templateId = Number(templateId)
          this.followUp.signName = signName
          this.followUp.defFlag = Number(defFlag)
          this.templateCenter = this.templateOptions.find(e => { return e.id == this.followUp.templateId }).content
        }
        this.templateIdProp = 'templateId'
        this.signNameProp = 'signName'
      }
    },
    // 右侧抽屉关闭
    handleClose (done) {
      done()
    },
    // 跟进客服搜索
    handlerClient () {
      if (this.clientPhone) {
        const params = {
          phone: this.clientPhone
        }
        this.$api.selectServiceMessage(params).then((res) => {
          if (res.code == 0) {
            this.clientMessage = res.data
          } else {
            this.clientMessage = []
          }
        })
      } else {
        this.$message.warning('请输入手机号码！')
      }
    },

    // 查询跟进客服
    queryService () {
      this.dialog.title = '跟进客服查询'
      this.dialog.type = 'queryService'
      this.dialog.width = '850px'
      this.dialog.visible = true
    },

    handledialogBatchClose () {
      this.dialogBatch.visible = false
    },
    handledialogService () {
      this.dialog.visible = false
      this.clientMessage = []
      this.clientPhone = ''
    },
    handleSelectionMoreChange (w) {
      console.log(w, 'w')
      this.MoreMultipleSelection = w
      this.MoreData = []
      if (this.MoreMultipleSelection.length) {
        this.MoreMultipleSelection.forEach((item) => {
          console.log(item, 'item')
          this.MoreData.push(item.id)
        })
      }

      console.log(this.MoreData, 'this.MoreData')
    },
    // 复制客服名字
    copyServiceName (row) {
      const that = this
      // let inline = this.line.find((res) => res.id == row.userDitch);
      const info =
          (row == null ? '无' : row)
      that.$copyText(info).then(
        function (e) {
          that.$message({
            type: 'success',
            message: '复制成功'
          })
        },
        function (e) {
          that.$message({
            type: 'warning',
            message: '复制失败'
          })
        }
      )
    },
    // 批量指派
    onDetail () {
      if (this.batchMultipleSelection.length) {
        this.dialogBatch.title = '批量指派'
        this.dialogBatch.type = 'batchAssign'
        this.dialogBatch.visible = true
        this.treeAxios()
        this.dialogBatch.width = '1050px'
        // this.ruleForm.clientCategory = ''
        this.formTc.username = ''
        this.multipleSelection = ''
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate()
        })
      } else {
        this.$message.warning('请勾选数据')
      }
    },
    handleChangeSearch (e) {
      this.queryForm.categoryId = e[e.length - 1]
    },
    // 指派弹框选择类目
    handleClientCategory (e) {
      this.clientCategoryId = e[e.length - 1]
    },

    // 微信添加状态
    wxAddState (e) {
      this.wxAddStateData = []

      const params = {
        pageNo: 1,
        pageSize: 1000,
        name: '',
        status: e
      }
      this.$api.getFollowUpRecord(params).then((res) => {
        if (res.code == 0) {
          this.$set(this, 'wxAddStateData', res.data)
          this.$set(this.followUp, 'wxDetails', '')
        }
      })
    },
    // 类目数据
    getCategoryDate () {
      const params = {
        pageSize: 10000
      }
      this.$api.categoryCascadeDate(params).then((res) => {
        if (res.code == 0) {
          this.categoryOptions = res.data
        }
      }).catch((err) => { console.log(err) })
    },
    // 跟进弹框秒杀监听
    seckill (e) {
      if (e == 0) {
        this.seckillPrice = true
        // this.followUp.spikeMoney = ''
        this.$set(this.followUp, 'spikeMoney', '')
      } else {
        // this.followUp.spikeMoney = '0'
        this.$set(this.followUp, 'spikeMoney', '0')

        this.seckillPrice = false
      }
    },
    // 跟进弹框接听状态
    answerStatus (e) {
      if (e == 0) {
        this.answerState = true
        // this.followUp.receiveDetails = ''
        this.answerStateDate = []
        this.$set(this.followUp, 'receiveDetails', '')
        this.receiveDetailsState = 'niubi'
      } else if (e == 1 || e == 2) {
        this.answerState = false
        this.answerStateDate = []
        this.getAnswerState(e)
        this.receiveDetailsState = 'receiveDetails'
      }
    },
    // 接听状况
    getAnswerState (state) {
      const params = {
        pageNo: 1,
        pageSize: 1000,
        name: '',
        status: state
      }
      this.$api.getFollowUpRecord(params).then((res) => {
        if (res.code == 0) {
          // this.answerStateDate = res.data
          this.$set(this, 'answerStateDate', res.data)
          this.$set(this.followUp, 'receiveDetails', '')
        }
      })
    },

    // 跟进类型数据
    getfollowUpList () {
      const data = {
        name: '',
        pageNo: 1,
        pageSize: 10
      }
      this.$api.customerGetFollowUp(data).then((res) => {
        if (res.code == 0) {
          this.followUpData = res.data.list
        }
      }).catch((err) => { console.log(err) })
    },
    submitData () {
      if (this.customerMessage > 0) {
        this.followUp.paramList.forEach((item) => {
          if (item.paramContent == '') {
            this.dataWarning = false
          } else {
            this.dataWarning = true
          }
        })
      }

      if (this.customerMessage > 0 && this.dataWarning == false) {
        return this.$message.warning('请填写选择对应模板后的参数！')
      }
      if (this.followUp.defFlag == '1') {
        localStorage.setItem('templateId', this.followUp.templateId)
        localStorage.setItem('signName', this.followUp.signName)
        localStorage.setItem('defFlag', this.followUp.defFlag)
      } else {
        localStorage.removeItem('templateId')
        localStorage.removeItem('signName')
        localStorage.removeItem('defFlag')
      }
      let data = {
        userId: this.followUpDateList.id,
        customerId: this.userInfo.id,
        customerName: this.userInfo.reallyName
      }
      data = Object.assign(data, this.followUp)
      this.$api.customerAddFollowUp(data).then((res) => {
        if (res.code == 0) {
          this.$message.success('新增成功！')
          this.listAxios()
          this.$refs['followUp'].resetFields()
          this.followUp.paramList = []
          this.templateCenter = ''
          this.drawer = false
          // this.followUp.sendMessageFlag = ''// 是否发送短信
        }
      }).catch((err) => { console.log(err) })
    },
    // 跟进记录选择提交
    subFollowUp (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const that = this
          // 获取当前时间的时间戳
          const now = new Date().valueOf()
          // 第一次点击
          if (this.lastTime == 0) {
            that.submitData()
            that.lastTime = now
          } else {
            if ((now - that.lastTime) > 5000) {
              // 重置上一次点击时间，2000是我自己设置的2秒间隔，根据自己的需要更改
              that.lastTime = now
              that.submitData()

              // 添加自己要调用的方法
            } else {
              console.log('不触发')
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 刷新
    refresh () {
      this.listAxios()
    },
    // 创建时间
    handleSelectDate (e) {
      this.data = e
      this.listAxios()
    },
    // 入线方式
    handleSelectIncoming (e) {
      this.queryForm.Incoming = e
      this.listAxios()
    },
    // 客户类型
    handleSelectClientType (e) {
      this.queryForm.clientType = e
      this.listAxios()
    },
    // 部门选择
    handleSelectOrgName (e) {
      this.queryForm.orgName = e
      this.listAxios()
    },
    // 客户意向搜索showDialog类目
    handleSelectIntention (e) {
      this.queryForm.intention = e
      this.listAxios()
    },
    // 客户等级搜索
    handleSelectCategory (e) {
      this.queryForm.category = e
      this.listAxios()
    },
    // 跟进客服搜索
    handleSelectCustomer (e) {
      this.queryForm.service = e
      this.listAxios()
    },
    //* * 普通数据请求 **//

    // 显示弹窗  dialog
    showDialog (title, type, width, row) {
      console.log(row)
      this.dialog.title = title
      this.dialog.type = type
      this.dialog.obj = type
      this.dialog.width = width
      this.currentRow = row
      this.dialog.visible = true
      this.MoreMultipleSelection = []
      this.batchMultipleSelection = []
      // this.ruleForm.clientCategory = ''
      this.formTc.username = ''
      this.multipleSelection = ''
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })

      if (type == 'assign') {
        this.treeAxios()
        this.dialog.width = '1050px'
      }
      if (type == 'add') {
        this.dialog.width = '700px'
        this.$refs.addCustomers.$refs.form.clearValidate()
      }
    },
    closeDialog (state) {
      this.dialog.visible = state
    },
    // 创建时间
    immediUpdate (e) {
      this.$nextTick(() => {
        if (e == null) {
          this.beginTime = ''
          this.endTime = ''
        } else {
          this.$set(this, 'date', [e[0], e[1]])
        }
      })
    },

    test (e) {
      this.axios
        .get('/order/comm/customertracking/list?id=' + e.id, {
          headers: {
            isLoading: false
          }
        })
        .then((r) => {
          const tempArr = []
          // for (let t of r.data) {
          tempArr.push(
            '' +
                r.data[0].customerName +
                ':' +
                r.data[0].comment +
                ', 时间：' +
                r.data[0].createdTime
          )
          this.$set(e, 'context', tempArr)
          // }
        })
    },

    // 导出客户信息
    customerGuide: _.debounce(function () {
      let beginTime = ''
      let endTime = ''
      if (this.date) {
        beginTime = this.date[0] + ' 00:00:00'
        endTime = this.date[1] + ' 23:59:59'
      }

      if (
        !sessionStorage.getItem('userInfo').salesAuthorityId &&
          (!beginTime || !endTime)
      ) {
        this.$message.warning('团队太大，请选择时间区间导出数据')
        return false
      }
      this.axios
        .post('/order/comm/customeruser/userExport', {
          userIntention: this.queryForm.intention,
          customerId: this.queryForm.service,
          pageNo: this.currentPage1,
          pageSize: this.pageSize,
          name: this.queryForm.name,
          phone: this.queryForm.phone,
          userDitch: this.queryForm.Incoming,
          userLevel: this.queryForm.category,
          type: this.queryForm.clientType ? this.queryForm.clientType : '5',
          endTime: endTime,
          startTime: beginTime,
          userType: '',
          orgCode: typeof (this.queryForm.orgName) === 'string' ? this.queryForm.orgName : this.queryForm.orgName[this.queryForm.orgName.length - 1],
          // orgCode: this.queryForm.orgName[this.queryForm.orgName.length - 1],
          version: ''
        })
        .then((res) => {
          if (res.code == 0) {
            this.downloadlink(res.data)
          } else {
            this.$message.error(res.message)
          }
        })
    }, 300),
    customerMoneySum: _.debounce(function () {
      let beginTime = ''
      let endTime = ''
      if (this.date) {
        beginTime = this.date[0] + ' 00:00:00'
        endTime = this.date[1] + ' 23:59:59'
      }
      if (!sessionStorage.getItem('userInfo').salesAuthorityId && (!beginTime || !endTime)) {
        this.$message.warning('团队太大，请选择时间区间导出数据')
        return false
      }
      this.axios.post(
        '/order/comm/customeruser/money/sumExport',
        {
          request: {
            dataScope: '',
            endTime: endTime,
            startTime: beginTime,
            userId: this.queryForm.info
          },
          version: ''
        }).then(res => {
        if (res.code == 0) {
          this.downloadlink(res.data)
        } else {
          this.$message.error(res.message)
        }
      })
    }, 300),

    // 删除用户
    delectCustomer (row) {
      this.$confirm('确定删除此客户，删除后将无法复原, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.axios
            .get('/order/comm/customeruser/delete?id=' + row.id, {
              isLoading: false
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('删除成功!')
                this.listAxios()
              } else {
                this.$message.error(res.message)
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    treeAxios (e) {
      if (e == 1) {
        this.stafpage = 1
        // this.stafPageSize = 10;
      }
      if (e == 2) {
        this.stafpage = 1
        this.stafPageSize = 10
        this.formTc.username = ''
      }
      this.axios
        .post('/sys/v1/org/tree/select', {
          request: {
            orgName: '',
            status: ''
          },
          version: ''
        })
        .then((res) => {
          if (res.code == 0) {
            this.tree = res.data
            this.staiffList(res.data[0].orgCode)
          }
        })
    },
    getRowKey (row) {
      return row.id
    },
    filterNode (value, data) {
      if (!value) return true
      return data.orgName.indexOf(value) !== -1
    },
    //* *数据请求**//
    handleNodeClick (data) {
      this.orgCode = data.orgCode
      this.staiffList(data.orgCode)
    },
    /** *员工列表***/
    staiffList (orgCode) {
      this.axios
        .post(
          '/sys/v1/user/employee/list',
          {
            request: {
              endTime: '',
              keyWord: this.formTc.username,
              orgCode: orgCode,
              pageNo: this.stafpage,
              pageSize: this.stafPageSize,
              phoneNumber: '',
              positionCode: '',
              reallyName: '',
              startTime: '',
              status: 'A',
              username: ''
            },
            version: ''
          },
          {
            headers: {
              isLoading: false
            }
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.tablePerson = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    handleSelectionChange (val) {
      this.batchMultipleSelection = val
      console.log(this.batchMultipleSelection, 'this.batchMultipleSelection')
    },
    allocation (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const that = this
          // 获取当前时间的时间戳
          const now = new Date().valueOf()
          if (this.lastTimeTwo === 0) {
            this.axios
              .get(
                '/order/comm/customeruser/batch/update/customerId?customerServiceId=' + this.serviceId + '&customerUserId=' + this.currentRow.id + '&categoryId=' + this.clientCategoryId,
                {
                  headers: {
                    isLoading: false
                  }
                }
              )
              .then((res) => {
                if (res.code == 0) {
                  this.$message.success('分配成功')
                  this.listAxios(1)
                  this.$refs.multipleTableTWO.clearSelection()
                  this.dialog.visible = false
                } else {
                  this.$message.error(res.message)
                }
              })
            that.lastTimeTwo = now
          } else {
            if ((now - that.lastTimeTwo) > 3000) {
              that.lastTimeTwo = now
              this.axios
                .get(
                  '/order/comm/customeruser/batch/update/customerId?customerServiceId=' + this.serviceId + '&customerUserId=' + this.currentRow.id + '&categoryId=' + this.clientCategoryId,
                  {
                    headers: {
                      isLoading: false
                    }
                  }
                )
                .then((res) => {
                  if (res.code == 0) {
                    this.$message.success('分配成功')
                    this.listAxios(1)
                    this.$refs.multipleTableTWO.clearSelection()
                    this.dialog.visible = false
                  } else {
                    this.$message.error(res.message)
                  }
                })
            } else {
              console.log('不触发')
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 批量分配客户成功
    submission: _.debounce(function (formName) {
      let serviceIds = []
      if (this.dialogBatch.type == 'batchAssign') {
        serviceIds = this.MoreData
      } else {
        serviceIds = this.serviceId
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const that = this
          // 获取当前时间的时间戳
          const now = new Date().valueOf()
          if (this.lastTime === 0) {
            const idList = []
            if (this.batchMultipleSelection.length) {
              for (let i = 0; i < this.batchMultipleSelection.length; i++) {
                idList.push(this.batchMultipleSelection[i].id)
              }
            } else {
              idList.push(this.currentRow.id) // 客户id
            }
            this.axios
              .post('/order/v1-2/customerUser/batchUpdate',
                {
                  categoryId: this.clientCategoryId,
                  customerUserIds: idList,
                  sysUserIds: serviceIds
                },
                {
                  headers: {
                    isLoading: false
                  }
                }
              )
              .then((res) => {
                if (res.code == 0) {
                  this.$message.success('分配成功')
                  this.listAxios(1)
                  this.$refs.multipleTable.clearSelection()
                  this.dialogBatch.visible = false
                  this.batchMultipleSelection = []
                } else {
                  this.$message.error(res.message)
                }
              })
            that.lastTime = now
          } else {
            if ((now - that.lastTime) > 3000) {
              that.lastTime = now
              const idList = []
              if (this.batchMultipleSelection.length) {
                for (let i = 0; i < this.batchMultipleSelection.length; i++) {
                  idList.push(this.batchMultipleSelection[i].id)
                }
              } else {
                idList.push(this.currentRow.id) // 客户id
              }
              this.axios
                .post('/order/v1-2/customerUser/batchUpdate',
                  {
                    categoryId: this.clientCategoryId,
                    customerUserIds: idList,
                    sysUserIds: serviceIds
                  },
                  {
                    headers: {
                      isLoading: false
                    }
                  }
                )
                .then((res) => {
                  if (res.code == 0) {
                    this.$message.success('分配成功')
                    this.listAxios(1)
                    this.$refs.multipleTable.clearSelection()
                    this.dialogBatch.visible = false
                    this.batchMultipleSelection = []
                  } else {
                    this.$message.error(res.message)
                  }
                })
            } else {
              console.log('不触发')
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }, 300),
    // 分配弹框内列表单选
    getCurrentRow (row) {
      this.serviceId = row.id
      console.log(row, 'row')
    },
    listAxios () {
		this.loading = true;
      let beginTime = ''
      let endTime = ''
      if (!this.is_null(this.date)) {
        beginTime = this.date[0] + ' 00:00:00'
        endTime = this.date[1] + ' 23:59:59'
      }
      const params = {
        // address:
        //   this.queryForm.province + this.queryForm.city + this.queryForm.area,
        platformId: this.queryForm.platformId,
        userIntention: this.queryForm.intention,
        customerId: this.queryForm.service,
        pageNo: this.currentPage1,
        pageSize: this.pageSize,
        name: this.queryForm.name,
        phone: this.queryForm.phone,
        userDitch: this.queryForm.Incoming,
        userLevel: this.queryForm.category,
        type: this.queryForm.clientType,
        endTime: endTime,
        startTime: beginTime,
        userType: '',
        // orgCode: this.queryForm.orgName.length > 1 ? this.queryForm.orgName[this.queryForm.orgName.length - 1] : this.queryForm.orgName,
        orgCode: typeof (this.queryForm.orgName) === 'string' ? this.queryForm.orgName : this.queryForm.orgName[this.queryForm.orgName.length - 1],
        categoryId: this.queryForm.categoryId
      }
      if (this.assignTime && this.assignTime[0]) {
        params.assignStartTime = this.assignTime[0] // 分配时间 开始
        params.assignEndTime = this.assignTime[1] // 分配时间 结束
      }
      if (this.customerAssignTime && this.customerAssignTime[0]) {
        params.customerAssignStartTime = this.customerAssignTime[0] // 指派时间筛选参数名 开始
        params.customerAssignEndTime = this.customerAssignTime[1] // 指派时间筛选参数名 结束
      }
      this.axios
        .post('/order/comm/customeruser/list', params)
        .then((res) => {
          if (res.code == 0) {
            res.data.list.forEach(item => {
              item.isFollow = false
              if (item.extantMap) {
                item.extantMap.forEach(itemTwo => {
                  if (itemTwo.customerId == this.userId) {
                    item.serviceId = itemTwo.customerId
                  }
                  if (itemTwo.type == '3') {
                    item.type = itemTwo.type
                  }
                  if (itemTwo.traceExists != 0) {
                    item.isFollow = true
                  }
                })
              }
            })
            this.tableData = res.data
            console.log(this.tableData.list)
          } else {
            this.$message.error(res.message)
          }
		  this.loading = false;
        })
    },
    reset: _.debounce(function () {
      this.queryForm = {
        info: '',
        Incoming: '',
        service: '',
        category: '',
        province: '',
        city: '',
        area: '',
        type: [],
        orgName: '',
        clientType: ''
      }
      this.date = ''
      this.assignTime = [] // 分配时间
      this.customerAssignTime = [] // 指派时间
      const saleId = JSON.parse(sessionStorage.getItem('salesAuthorityId'))
      // if (
      //   saleId == '' ||
      //   saleId == undefined ||
      //   sessionStorage.getItem('positionCode') == 'manager'
      // ) {
      //   this.queryForm.clientType = '4'
      // } else {
      //   this.queryForm.clientType = '1'
      // }
      this.currentPage1 = 1
      this.pageSize = 10
      this.listAxios(1)
    }, 300),
    // 部门选择列表
    department () {
      this.axios
        .post(
          '/sys/v1/org/tree/select',
          {
            request: {
              orgName: '',
              orgType: ''
            },
            version: ''
          },
          {
            headers: {
              isLoading: false
            }
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.options = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    tolist (row) {
      if (row.customerType != '4') {
        this.$router.push({
          name: 'customerListOrder',
          query: {
            id: row.id
          }
        }) // userId就是用户id
      } else {
        this.$message.warning('无权限操作')
      }
    },

    // 客户下拉框数据
    customerlist () {
      this.axios
        .get(
          '/sys/v1/user/employee/by/sales/authority?isQueryDel=1&salesAuthorityId=' +
              JSON.parse(sessionStorage.getItem('salesAuthorityId').split(',')),
          {
            headers: {
              isLoading: false
            }
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.customer = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    getAddrData (val) {
      this.queryForm.province = val
      if (!val) {
        this.queryForm.city = ''
        this.queryForm.area = ''
      }
    },
    getCity (val) {
      this.queryForm.city = val
    },
    getArea (val) {
      this.queryForm.area = val
    },
    //* * 普通数据请求 **//
    commentAxios () {
      /* 意向*/
      this.axios
        .get(
          '/sys/v1/common/by/group?groupId=' + 'customer_intention',
          {
            salesAuthorityId: JSON.parse(
              sessionStorage.getItem('salesAuthorityId')
            )
          },
          {
            headers: {
              isLoading: false
            }
          }
        )
        .then((res) => {
          if (res.code == 0) {
            res.data.map(item => {
              item.dictId = parseInt(item.dictId)
            })
            this.intention = res.data
          } else {
            this.$message.error(res.message)
          }
        })
      // 入线方式
      this.axios
        .get('/order/comm/customeruser/selectCustomerditch', {
          headers: {
            isLoading: false
          }
        })
        .then((res) => {
          if (res.code == 0) {
            this.line = res.data
          } else {
            this.$message.error(res.message)
          }
        })
      /* 客户类型*/
      this.axios
        .get('/sys/v1/common/by/group?groupId=' + 'customer_type', {
          headers: {
            isLoading: false
          }
        })
        .then((res) => {
          if (res.code == 0) {
            // if (JSON.parse(sessionStorage.getItem("salesAuthorityId")) == "1") {
            //   let data = res.data.filter(
            //     (res) => res.dictId == 1 || res.dictId == 4
            //   );
            //   this.client = data;
            // } else {
            this.client = res.data
            // }
          } else {
            this.$message.error(res.message)
          }
        })
      /* 等级*/
      this.axios
        .get('/sys/v1/common/by/group?groupId=' + 'customer_level', {
          headers: {
            isLoading: false
          }
        })
        .then((res) => {
          if (res.code == 0) {
            this.rank = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    // 获取平台列表
    getPlatformList () {
      const params = {}
      this.$api.platformDataList(params).then((res) => {
        this.platformList = res.data
      }).catch((err) => {
        console.log(err)
      })
    },
    toAddOrder (row) {
      if (row.customerType != '4' && row.blackListFlag != 1) {
        this.$router.push({
          name: 'add_order',
          query: {
            userId: row.id,
            pingZ: true
          }
        }) // userId就是用户id
        sessionStorage.removeItem('goodsList')
        sessionStorage.removeItem('giftList')
        sessionStorage.removeItem('voucher')
      } else {
        this.$message.warning('无权限操作或已被拉黑')
      }
    },
    //* * 普通数据请求 **//
    // 弹出层分页
    handleCurrentEmplay (val) {
      console.log(val, 'val')
      this.stafpage = val
      this.staiffList(this.orgCode)
    },
    handleSizeEmplay (val) {
      this.stafPageSize = val
      this.staiffList(this.orgCode)
    },
    // 分页
    handleCurrentChange (val) {
      this.currentPage1 = val
      this.listAxios()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.listAxios()
    },

    // 跳转客户资料
    toInformation (row, t) {
      if (
        row.customerType != '4' &&
          this.parArray.indexOf('btnEditCode') != -1
      ) {
        // || this.parArray.indexOf("customeruserDetail") != -1
        this.$router.push({
          name: 'customerInformation',
          query: {
            id: row.id,
            navName: 0,
            uid: row.customerId
          }
        })
      } else {
        this.$message.warning('无权限操作')
      }
    },
    // 跳转地址
    toAddress (row) {
      if (row.customerType != '4') {
        this.$router.push({
          name: 'addressList',
          query: {
            id: row.id
          }
        })
      } else {
        this.$message.warning('无权限操作')
      }
    },
    //* * 模糊查询数据 **//
    searchEvent: _.debounce(function () {
      this.currentPage1 = 1
      // this.pageSize = 10;
      this.listAxios('1')
    }, 300),
    is_null (content) {
      if (content) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.inquiryTab {
  background: #fff;
  padding: 20px 20px 20px 20px;
  border-radius: 5px;
  .el-form {
    margin-top: 10px;
  }
  margin-top: 20px;
  .inquiryTab_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tabTitle {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      //margin-bottom: 9px;
      color: #333333;
    }
  }
}
.headerbox {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  line-height: 60px;
  padding: 0 20px 0 20px;
  border-bottom: 1px solid #ededed;
  // padding-bottom: 10px;
  .header {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    .title_left {
      width: 4px;
      height: 16px;
      background: #4c81eb;
      opacity: 1;
      margin-right: 10px;
    }
  }
}
.search-form {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 100%;
    max-width: 303px;
    min-width: 299px;
    /deep/.el-form-item__label{
      width: 70px;
    }
    /deep/.el-form-item__content {
      width: calc(100% - 70px);
      .el-select, .el-date-editor, .el-cascader {
        width: 100%;
      }
    }
  }
}

.btns {
  display: flex;
  justify-content: right;
  margin-bottom: 10px;
}
.table {
  margin-top: 20px;
}

.tableCont {
  margin-bottom: 25px;
}
/deep/.tableCont table thead tr th div span{
  font-size: 16px;
  color: #333333;
}

/deep/.vxe-cell--title {
  color: #2d7edf;
}

.nameClick:hover {
  cursor: pointer;
}

/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

.query {
  background: #fff;
  padding: 20px;

  .header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    span {
      font-size: 15px;
    }
    p {
      font-size: 12px;
      color: #2d7edf;
    }
    p:hover {
      cursor: pointer;
    }
  }

  /deep/.el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    display: inline-block;
  }
}

// /deep/ .query .el-input__inner{
// 		width:180px;
// }
@media screen and (max-width: 600px) {
  /deep/ .query .el-input__inner {
    width: 100px;
  }
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}

.operation {
  // float:left;
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
  span {
    color: #2d7ddf;
  }
  img {
    width: 25px;
    height: 25px;
  }
}

.operation:hover {
  cursor: pointer;
}

.table {
  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }

  /deep/ .el-table th > .cell {
    text-align: center;
    // color: rgb(45, 125, 223);
    font-size: 15px;
  }

  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }
}

.page {
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  // position: fixed;
  // bottom: 0px;
  // right: 0px;
  z-index: 5;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}

.page2 {
  text-align: right;
  // width: 100%;
  // background: #f5f5f5;
  padding-right: 20px;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}

.table1 {
  display: inline-block;
  height: 500px;
  margin-left: 15px;
  width: 740px;
  overflow-y: scroll;

  /deep/.el-input__inner {
    width: 100px;
    height: 28px;
    line-height: 28px;
  }
}

.tree {
  height: 600px;
  overflow-y: scroll;
  width: 250px;
  float: left;

  /deep/.el-input__inner {
    width: 200px;
    height: 28px;
    line-height: 28px;
  }
}

/deep/.el-dialog__body {
  padding: 15px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

/deep/.el-dialog__header {
  padding: 10px 20px 10px;

  .el-dialog__title {
  }
}

/deep/.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  width: 1052px;
  // height: 700px;
  z-index: 1000;
}

/deep/.el-dialog__headerbtn {
  top: 15px;
}

/deep/.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.btnBox{
  /deep/ .el-button {
    min-width: 120px;
    height: 36px;
    border-radius: 4px;
    font-size: 16px;
  }
}
/deep/.el-scrollbar{
  height:10px;
}
/deep/.el-scrollbar__bar.is-horizontal{
  height: 9px;

}
/deep/.el-drawer__body{
  padding: 0 20px 0 24px;
}
.cancel{
  width: 120px;
  height: 36px;
  border: 1px solid #D9D9D9;
  opacity: 1;
  border-radius: 4px;
}
.affirm{
  width: 120px;
  height: 36px;
  background: #4168E7;
  opacity: 1;
  border-radius: 4px;
}
.titleCss{
  font-size: 16px;
  font-weight: bold;
  line-height: 0px;
  color: #333333;
  margin-bottom: 16px;
}
.followUp{
  display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
  margin-bottom: 200px;
}
@media screen and (max-width:1600px) {
  .followUp {
    display: flex;
    flex-flow: wrap;

  }
  .followUpBox{
    margin-top: 10px;
  }
}

.followUpBox{
  box-sizing: border-box;
  width: 252px;
  background: #F5F8FF;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  color: #666666;
  line-height: 26px;
  padding: 16px;
  position: relative;
  margin-top: 10px;
}
.followUpBox_index{
  position: absolute;
  top:25px;
  left: 195px;
  font-size: 40px;
  font-weight: bold;
  line-height: 0px;
  color: #E3EDFF;
}
.templateDiv{
  padding: 12px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  background: #F5F8FF;
  margin-top: 12px;
}
/deep/.el-drawer__open .el-drawer.rtl{
  border-radius: 2%;
}
.drawerBtn{
  width: 575px;
  height: 85px;
  box-sizing: border-box;
  margin-top: 30px;
  padding: 14px 20px 14px 20px;
  border-top: 1px solid #D9D9D9;
  position: fixed;
  top: 88%;
  left: 70.1%;
  background: #ffffff;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
/deep/.el-drawer rtl{
  position: relative;
}
</style>
